import Image from 'next/image';

export default function Partners() {
  const partners = [
    { name: '百度', image: '/images/partner-placeholder.png' },
    { name: '耐克', image: '/images/partner-placeholder.png' },
    { name: '丰田', image: '/images/partner-placeholder.png' },
    { name: '永雄投资', image: '/images/partner-placeholder.png' },
    { name: '智优营家', image: '/images/partner-placeholder.png' }
  ];

  return (
    <div className="bg-white py-12 sm:py-16">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900">合作伙伴</h2>
          <p className="mt-2 text-base leading-8 text-gray-600">OUR PARTNER</p>
        </div>
        <div className="mx-auto mt-12 grid max-w-7xl grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
          {partners.map((partner, index) => (
            <div
              key={index}
              className="col-span-1 flex justify-center items-center p-8 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-300"
            >
              <div className="relative w-full h-20">
                <Image
                  src={partner.image}
                  alt={partner.name}
                  fill
                  style={{ objectFit: 'contain' }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
} 